<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>选择材料类型</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="addto.css">
</head>
    <body>
	<div id="app">
		<!-- 手机端头部 -->
		<h4 style="padding: 10px;" class="table_2_h4"><span @click="back()" class="glyphicon glyphicon-chevron-left" style="color: rgb(52, 52, 52);">添加页</span></h4>
		<!-- 选项部分 -->
		<div id="func">
	
			<!-- 选择类型 -->
			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">类型
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu"  aria-labelledby="dropdownMenu1" >
					<li v-for="(item,index) of list" :key="index" @click="show(item)"><a href="#">{{item.MeNam1}}</a></li>		
				</ul>
			</div>
			<!-- 选择系列 -->
			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">系列
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu"  aria-labelledby="dropdownMenu1" v-if="series.lenght!=0">
					<li v-for="(item,index) of series" :key="index" @click="color(item.MeID)"><a href="#">{{item.MeNam1}}</a></li>		
				</ul>
			</div>
			<!-- 选择颜色 -->
			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">颜色
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu"  aria-labelledby="dropdownMenu1" v-if="series.lenght!=0">
					<li v-for="(item,index) of colors" :key="index" @click="table_data(item.ColorID,0)"><a href="#">{{item.ColorName}}</a></li>	
				</ul>
			</div>
			
			<!-- 选择类型 -->
			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">排序
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu"  aria-labelledby="dropdownMenu2" >
					<li @click="table_data(null,1)">
					    <a  href="#">产品型号</a>
					</li>
					<li @click="table_data(null,2)">
					    <a  href="#">产品名称</a>
					</li>
					<li @click="table_data(null,3)">
					    <a  href="#">颜色</a>
					</li>
					<li @click="table_data(null,4)">
					    <a  href="#">长度</a>
					</li>	
				</ul>
			</div>
			
			<button class="btn btn-info" @click="a()">全选</button>
		</div>
		<!-- 身体部分 -->
		<div v-if="mytabledata.length>0" id="d1">
			<ul class="nav" v-for="(item,index) in mytabledata" :key="index">
				<li>
					<span></span>
					<span>{{index+1}}</span>
				</li>
				<li>
					<span></span>
					<span>							
							<input type="checkbox" :checked="mychecked==true" :value="index" ref='mycheck'>
					</span>
				</li>
				<li>
					<span></span>
					<span><img :src="`../DStuffXHImg/${item.DMode}.jpg`" height="80" width="50"/></span>
				</li>
				<li>
					<ul class="nav">
						<li>
							<span></span>
							<span>{{item.DName}}</span>
						</li>
						<li>
							<span></span>
							<span>{{item.DMode}}</span>
						</li>
						<li>
							<span class="label label-info">颜色:</span>
							<span>{{item.ColorName}}</span>
						</li>
						<li>
							<span class="label label-info">规格:</span>
							<span>{{item.DGge}}</span>
						</li>
						<li>
							<span class="label label-info">单价:</span>
							<span>{{item.DPrice}}</span>
						</li>
						<li >
							<span  class="label label-info">米重:</span>
							<span>{{item.DWght}}</span>
						</li>
						<li>
							<span  class="label label-info">壁厚:</span>
							<span>{{item.BiHou}}</span>
						</li>
					</ul>

				</li>
			</ul>
		</div>
		<!-- 选项部分 -->
		<div id="select" v-if="mytabledata.length>0">
			<button type="button" class="btn btn-primary btn-lg btn-block" @click="stim()">添加购物车</button>
		</div>
	</div>
	</body>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="../js/axios.min.js"></script>
	<script src="../js/vue.js"></script>
	<script>
	
		var app = new Vue({
            el:"#app",
            data() {
                return{
					//获取单号id
					user_id:'',
					//获取的数据
					mydata: [],
					//遍历后的类型数据
					list:[],
					//遍历后的系列数据
					series:[],
					//遍历后的颜色数据
					colors:[],
					//选中颜色id
					MeID:'',
					//将表格数据进行渲染
					mytabledata:[],
					//选择状态
					mychecked:false,
					//放到购物车的值
					shoppingdata:[],
					//选中的颜色
					ColorID:''
                }
            },
            methods:{
					// 将从页面1中跳转过来的用户id参数进行保存
					getUrlParams(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]);
					return null;
					},
					//数据进行修改结构
              		change(){
                    //	遍历数据
					this.mydata.forEach((i) => {
						//先给mydata对象新加一个空数组属性
						i.child = [];
						//每次的类值再跟所有对象的id做比较,如果相同就放入该类下
						this.mydata.forEach((a) => {
							if (i.MeID == a.SGrop) {
								i.child.push(a);
							}
						})
					})
					this.mydata.forEach((i) => {
						if (i.MeCode == "FuLei") {
							this.list.push(i)
						};
					})
					console.log(this.list);
					
					},
					//选择类型后执行
					show(item){
						console.log(item.child);
						this.series=item.child;
					},
					//颜色数据的获取
					color(MeID){
						//先进行保存,后面会用到
						this.MeID=MeID;	
						console.log(this.MeID);
						//使用ajax进行遍历
						axios({
							url:'http://img.zhangjiankeji.cn/ashx/DStu_XL_Color.ashx',
							method: 'post',
							data: `XLMeID=${MeID}`,
							headers:{
								'Content-Type':'application/x-www-form-urlencoded'
							}
						})
						.then(respanse=>{
							//获取颜色数据就行赋值
							this.colors=respanse.data;console.log(this.colors);
						})
					},
					//获取表单数据
					table_data(ColorID,i){
						//判断是否有参数
						if(ColorID!=null){this.ColorID=ColorID;} 
						if(this.ColorID==""){alert('没有数据怎么筛选呢!'); return; }
						//使用ajax进行遍历
						axios({
							url:"http://img.zhangjiankeji.cn/ashx/DStu_XL_Item.ashx",
							method: 'post',
							data: `Sort=${i}&XLMeID=${this.MeID}&ColorID=${this.ColorID}`,
							headers:{
								'Content-Type':'application/x-www-form-urlencoded'
							}
						})
						.then(respanse=>{
							console.log(respanse.data);
							//赋值给数据
							this.mytabledata=respanse.data;
						})
					},
					//全选和全不选
					a(){
						this.mychecked=!this.mychecked;
					},
					//关闭页面
					back(){	
							//判断是否是微信
						    var ua = navigator.userAgent.toLowerCase();
						    if(ua.match(/MicroMessenger/i)=="micromessenger") {
								//兼容微信端--
								WeixinJSBridge.call('closeWindow');
						    } else {
								window.close();
						    }
					},
					//选中提交
					stim(){
						//提交前再次确定
						if(window.confirm('确定提交嘛!')){
							var shoppingdata =[];
						//进行循环数组,查看选中
						this.$refs.mycheck.forEach((item)=>{
						//只要选中的元素,进行筛选
							if(item.checked){
								shoppingdata.push(this.mytabledata[item.value]);		
							}
						})
						//将数据存储到浏览器上
						localStorage.setItem("shopping", JSON.stringify(shoppingdata));
						//跳转到购物车页面
						window.open(`./Select.html?id=${this.user_id}`);
						}
					}
			},
			mounted(){
				//获取单号
				this.user_id=this.getUrlParams('id');
				//使用axios传递参数
				axios.post("http://img.zhangjiankeji.cn/ashx/DStu_XL.ashx").then((result)=>{
					console.log(result.data);
					//进行赋值
					this.mydata=result.data;
					//最后在进行,数据结构的改变
					this.change();
				})
			},
			//监听series的改变
			watch :{

			}
        })
	</script>
</html>